<style lang="scss" scoped>
#map {
  .bm-view {
    width: 100%;
    height: 300px;
    position: relative;
    overflow-y: scroll;
  }
  .bm-view.start:after {
    position: absolute;
    top: 50%;
    font-family: "iconfont" !important;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
    content: "\e660";
    text-shadow: 3px 3px rgba(170, 168, 168, 0.26),
      5px 5px rgba(126, 125, 125, 0.527);
    font-size: 24px;
    color: #0068fe;
  }
  .bm-view.end:after {
    position: absolute;
    top: 50%;
    font-family: "iconfont" !important;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
    content: "\e660";
    text-shadow: 3px 3px rgba(170, 168, 168, 0.26),
      5px 5px rgba(126, 125, 125, 0.527);
    font-size: 24px;
    color: #ff5a00;
  }
  .box_list {
    height: calc(100% - 362px);
    overflow-y: scroll;
  }
}
</style>
<template>
  <div id="map" class="fixed">
    <!-- 顶部导航 -->
    <van-nav-bar
      title="选择位置"
      left-arrow
      @click-left="onClickLeft"
    ></van-nav-bar>
    <baidu-map
      class="bm-view"
      :class="active"
      :center="center"
      :zoom="zoom"
      @ready="handler"
      @dragend="dragend"
      @zoomend="zoomend"
      @dragstart="dragstart"
    >
      <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
      <bm-geolocation
        anchor="BMAP_ANCHOR_BOTTOM_RIGHT"
        :autoLocation="true"
      ></bm-geolocation>
      <!-- 显示城市列表 -->
      <!-- <bm-city-list anchor="BMAP_ANCHOR_TOP_LEFT"></bm-city-list> -->
      <!-- 交通流量覆盖物 -->
      <bm-traffic :predictDate="{ weekday: 7, hour: 12 }"> </bm-traffic>
    </baidu-map>
    <p>{{ center.lng }}-{{ center.lat }}</p>
    <p>{{ elt }}</p>
    <!-- <p>{{ msg }}</p> -->
    <!-- <van-button
      :disabled="msg == '拖动选择地址'"
      plain
      hairline
      type="info"
      @click="gotohome"
      >{{ msg }}</van-button
    > -->
    <p v-if="off" style="text-align: center">加载中……</p>
    <div v-if="!off" class="box_list">
      <van-cell :title="msg" icon="location-o" @click="gotohome(1, 'one')" />
      <van-cell
        v-for="(item, index) in list"
        :key="index"
        :title="item.address"
        icon="location-o"
        @click="gotohome(index, 'list')"
      />
    </div>
  </div>
</template>

<script>
// import { Toast } from "vant";
export default {
  data: () => ({
    center: { lng: 38.316076, lat: 116.869843 },
    zoom: 3,
    elt: "",
    msg: "",
    active: "end",
    BMap: null,
    map: null,
    list: [],
    off: false,
  }),
  created() {
    this.active = this.$route.query.txt;
    this.whereami();
  },
  methods: {
    dragstart() {
      this.off = true;
    },
    //   拿到数据回到主页
    gotohome(index, type) {
      if (this.$route.query.txt == "start") {
        if (type == "one") {
          this.$store.commit("setStartData", this.msg);
        } else if (type == "list") {
          this.$store.commit("setStartData", this.list[index].address);
        }
      } else if (this.$route.query.txt == "end") {
        if (type == "one") {
          this.$store.commit("setEndData", this.msg);
        } else if (type == "list") {
          this.$store.commit("setEndData", this.list[index].address);
        }
      }
      setTimeout(() => {
        this.$router.push("/");
      }, 100);
    },
    onClickLeft() {
      this.$router.push("/");
    },
    // 地图更改缩放级别结束时触发触发此事件
    zoomend(e) {
      this.zoom = e.target.Na;
    },
    // 停止拖拽地图时触发
    dragend(e) {
      const that = this;
      const { lng, lat } = e.target.getCenter();
      this.center = { lng, lat };
      const gc = new this.BMap.Geocoder();
      console.log(gc);
      gc.getLocation(e.target.getCenter(), function (rs) {
        // console.log(rs.surroundingPois);
        // console.log(rs.address);
        that.msg = rs.address;
        that.list = rs.surroundingPois;
      });
      this.off = false;
    },
    handler({ BMap, map }) {
      // map.enableScrollWheelZoom(true);
      // Toast.loading({ message: "加载中...", forbidClick: true });
      window.map = map;
      this.BMap = BMap;
      this.map = map;
    },
    // 获取自身位置
    whereami() {
      var options = {
        enableHighAccuracy: true, //是否高精度
        maximumAge: 300000, //五分钟后
        timeout: 15000, //愿意等多长时间
      };
      let that = this;
      if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(success, error, options);
      } else {
        that.elt = "您的浏览器不支持定位";
      }
      function error(e) {
        that.elt = "定位失败 " + e.code + " : " + e.message;
        that.center.lng = 116.869843;
        that.center.lat = 38.316076;
        that.zoom = 15;
      }
      function success(pos) {
        console.log(pos);
        var msg =
          "在" +
          new Date(pos.timestamp).toLocaleString() +
          "的时候，距离您" +
          pos.coords.accuracy +
          "米的地方，经度" +
          pos.coords.latitude +
          "纬度" +
          pos.coords.longitude +
          " . ";
        that.elt = msg;
        that.zoom = 12;
        that.center = { lng: pos.coords.longitude, lat: pos.coords.latitude };
        that.msg = "拖动选择地址";
      }
    },
  },
};
</script>